<!--
 * @Author: FanWeiHua
 * @Date: 2021-07-27 11:46:34
 * @LastEditTime: 2021-08-01 22:50:07
 * @Description: 操作页
-->
<template>
  <section class="index">
    <n-layout class="n-layout-class">
      <n-layout-header :inverted="inverted" bordered>
        <n-button circle @click="onBack">返回</n-button><n-switch @click="switchTheme" :value="theme === 'darkTheme'" />
      </n-layout-header>
      <n-layout has-sider class="n-layout-content">
        <n-layout-sider
          bordered
          show-trigger
          collapse-mode="width"
          :collapsed-width="64"
          :width="200"
          :native-scrollbar="false"
          :inverted="inverted"
        >
          <n-menu
            :value="activeKey"
            :inverted="inverted"
            :collapsed-width="64"
            :collapsed-icon-size="22"
            :options="menuOptions"
            @update:value="handleUpdateValue"
          />
        </n-layout-sider>
        <n-layout class="n-layout-right">
          <router-view></router-view>
        </n-layout>
      </n-layout>
      <n-layout-footer :inverted="inverted" bordered> Footer Footer Footer </n-layout-footer>
    </n-layout>
  </section>
</template>
<script>
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ref, computed } from 'vue';
import menuOptions from './menuOptions.js'; // 菜单配置

import { NButton, NSwitch, NLayoutSider, NMenu, NLayoutHeader, NLayout, NLayoutFooter } from 'naive-ui';
export default {
  setup() {
    const route = useRouter();
    const store = useStore();
    const { currentRoute } = route;
    const activeKey = ref(currentRoute.value.name);
    /**
     * 主题切换
     */
    const switchTheme = () => {
      store.commit('increment/switchTheme');
    };
    /**
     * 返回
     */
    const onBack = () => {
      route.push('/');
    };
    return {
      theme: computed(() => store.state.increment.theme),
      activeKey,
      inverted: ref(false),
      menuOptions,
      switchTheme,
      onBack,
      handleUpdateValue(key, item) {
        route.push(item.route);
        activeKey.value = key;
      }
    };
  },
  components: {
    NButton,
    NSwitch,
    NLayoutSider,
    NMenu,
    NLayout,
    NLayoutHeader,
    NLayoutFooter
  }
};
</script>
<style lang="css" scoped>
.index {
  width: 100vw;
  height: 100vh;
}
.n-layout-class {
  height: 100%;
  width: 100%;
}
.n-layout-footer {
  height: 42px;
}
.n-layout-content {
  height: calc(100% - 84px);
}
.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.n-layout-right {
  padding: 20px;
}
.n-layout-header {
  height: 42px;
  display: flex;
  align-items: center;
}
</style>
